<template>
  <div class="itemTitle flex justify-between">
    <div><span :style="{background:color}"></span>{{title}}</div>
    <div v-show="is_link"><el-button type="primary" size="small" icon="el-icon-refresh-right" @click="load">刷新</el-button></div>
  </div>
</template>
<script>
export default {
  name: "Title",
  props: {
    title: {
      type: String,
      default: "默认",
    },
    color: {
      type: String,
      default: "#007af8",
    },
    is_link:{
      type:Boolean,
      default: true
    }
  },
  data() {
    return {
    };
  },
  methods:{
    load(){
      this.$emit('load')
    }
  }
};
</script>
<style scoped>
.itemTitle {
  width: 100%;
  line-height: 50px;
  background-color: #ffffff;
  border: 1px solid #EBEEF5;
  border-top:none ;
  border-left:none ;
  border-right: none;
}
.itemTitle > div:nth-child(1) {
  font-size: 14px;
  font-weight: 600;
  color: #333333;
  position: relative;
  padding-left:20px ;
}
.itemTitle > div:nth-child(1) span {
  display: inline-block;
  width: 2.5px;
  height: 18px;
  position: absolute;
  left: 10px;
  top: 16px;
}
.itemTitle > div:nth-child(2){
  padding-right:20px ;
}
.el-button--primary{
      background-color: #007af8;
    border-color: #007af8
}
</style>